<template>
    <div class="container">

      <!-- 条件查询 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="算法名" size="small">
          <el-input v-model="algorithmQuery.title" placeholder="请输入算法名称"></el-input>
        </el-form-item>
        <el-form-item label="算法类型" size="small">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-select v-model="algorithmQuery.type" placeholder="请选择算法类型">
            <el-option label="预处理算法" :value="0"></el-option>
            <el-option label="分析算法" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchAlgInfo()" size="small">搜索</el-button>
          <el-button type="default" @click="resetData()" size="small">清空</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true">
        <el-form-item label="当前默认预处理算法：" size="small">
          <el-col v-for="item in PreAlg">
            <b v-if="item.isDefault === 1">{{item.title}}</b>
          </el-col>
        </el-form-item>
        &#8195;
        <el-form-item label="当前默认分析算法：" size="small">
          <el-col v-for="item in AnaAlg">
            <b v-if="item.isDefault === 1">{{item.title}}</b>
          </el-col>
        </el-form-item>
        &#8195;
        <el-form-item>
        <el-button type="primary" icon="el-icon-seacher" @click="dialogVisible = true" size="small">切换</el-button>
        </el-form-item>
      </el-form>

      <!--批量操作-->
      <div>
        <router-link :to="{name:'AddAlgorithm'}">
          <el-button type="primary" @clik="addAlgorithm" id="add-alg-btn" size="medium">添加算法</el-button>
        </router-link>
        <el-button type="danger" @click="deleteAlgBatch" size="medium">删除选中</el-button>
      </div>

      <div class="table-box" >
      <!--算法表格-->
      <el-table
          :data="tableData" border
          style="width: 100%"
          class="table-box"
          ref="multipleTable"
          header-cell-class-name="table-header"
          :header-cell-style="headClass"
          :cell-style="rowClass"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="date"
                         label="序号"
                         width="50">
          <!--计算得出序号-->
          <template #default="scope">
            {{ (query.pageIndex - 1) * query.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <!--不显示算法id-->
        <!--<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>-->
        <el-table-column prop="title" label="算法名称" width="130"></el-table-column>
        <el-table-column prop="uploader" label="上传者" width="120"></el-table-column>
        <el-table-column prop="uploadTime" label="上传时间" width="200"></el-table-column>

        <el-table-column prop="type" label="类型" width="120">
          <template #default="scope">
            {{ scope.row.type===0?'预处理算法':'分析算法'}}
          </template>
        </el-table-column>

        <el-table-column prop="description" label="备注"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <router-link :to="{name:'ViewAlgorithm', params:{id: scope.row.id}}">
              <el-button size="medium" icon="el-icon-edit" id="view-btn" type="primary">查看</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>

      <el-dialog
          v-model="dialogVisible"
          title="请选择要切换的算法"
          width="50%"
          :before-close="cancelSwitch"
      >
        <el-form :model="form">
          <p>预处理算法</p>
          <div style="margin-top: 20px">
            <el-radio-group v-for="item in PreAlg" v-model="changeAlg.radioPre">
              <el-radio :label="item.id" border>{{item.title}}</el-radio>
            </el-radio-group>
          </div>
          <br>
          <p>分析算法</p>
          <div style="margin-top: 20px">
            <el-radio-group v-for="item in AnaAlg" v-model="changeAlg.radioAna">
              <el-radio :label="item.id" border>{{item.title}}</el-radio>
            </el-radio-group>
          </div>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
        <el-button @click="cancelSwitch">取消</el-button>
        <el-button type="primary" @click="switchAlgorithm"
        >确认</el-button
        >
      </span>
        </template>
      </el-dialog>

    </div>

</template>

<script>
    import algorithm from "../../api/admin/admin";

    export default {
      data() {
        return {
          query: {
            algorithm:{
            },
            pageIndex: 1,
            pageSize: 8,
            key:"",
            value:""
          },
          defaultPre:null,
          // 查询条件
          algorithmQuery: {
            title: '',
            type: null,
          },
          tableData: [],
          AnaAlg: [],
          PreAlg: [],
          dialogVisible: false,
          changeAlg:{
            radioPre: null,
            radioAna: null,
          },
          // 选中用户信息
          multipleSelection: [],
          // 选中算法编号
          algIdSelected: [],
          pageTotal: 0,
          form: {},
          idx: -1,
          id: -1
        };
      },
      created() {
        this.getData();
      },
      methods: {
        // 表头居中显示
        headClass() {
          return "text-align:center"
        },
        rowClass() {
          return "text-align:center"
        },
        searchAlgInfo(pageIndex = 1) {
          this.query.pageIndex = pageIndex
          algorithm.searchAlgInfo(this.query.pageIndex, this.query.pageSize, this.algorithmQuery)
              .then((response) => {
                this.tableData = response.data.item.records;
                this.pageTotal = response.data.item.total;
              }).catch(error => {
            console.log(error);
            this.$message({
              type: 'error',
              message: '获取算法信息失败'
            })
          })
        },
        // 重置搜索栏
        resetData() {
          this.algorithmQuery.title = null;
          this.algorithmQuery.type = null;
        },
        // 获取 easy-mock 的模拟数据
        getData() {
          algorithm.getAlgorithm(this.query.pageIndex,this.query.pageSize,this.query.algorithm).then(res => {
            console.log(res);
            this.tableData = res.data.item.records;
            this.pageTotal = res.data.item.total;
          });
          algorithm.getAllAnaAlg().then(res => {
            console.log(res);
            this.AnaAlg = res.data.list;
            for (var i = 0; i < this.AnaAlg.length; i++) {
              if (this.AnaAlg[i].isDefault === 1){
                this.changeAlg.radioAna = this.AnaAlg[i].id
              }
            }
          });
          algorithm.getAllPreAlg().then(res => {
            console.log(res);
            this.PreAlg = res.data.list;
            for (var i = 0; i < this.PreAlg.length; i++) {
              if (this.PreAlg[i].isDefault === 1){
                this.changeAlg.radioPre = this.PreAlg[i].id
              }
            }
          });
          // this.adminInfo = JSON.parse(window.sessionStorage.getItem("freePromorunningtmr"));
        },
        defaultRadio(){
          for (var i = 0; i < this.AnaAlg.length; i++) {
            if (this.AnaAlg[i].isDefault === 1){
              this.changeAlg.radioAna = this.AnaAlg[i].id
            }
          }
          for (var i = 0; i < this.PreAlg.length; i++) {
            if (this.PreAlg[i].isDefault === 1){
              this.changeAlg.radioPre = this.PreAlg[i].id
            }
          }
        },
        cancelSwitch(){
          // this.changeAlg.radioPre = null
          // this.changeAlg.radioAna = null
          this.dialogVisible = false
          this.defaultRadio()
        },
        switchAlgorithm(){
          // console.log(this.changeAlg.radioPre)
          // console.log(this.changeAlg.radioAna)
          algorithm.switchAlgorithm(this.changeAlg).then(resp => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            // 修改成功后直接重新赋值
            this.getData();
          }).catch(resp => {
            this.$message({
              type: 'error',
              message: resp.message
            })
          })
          this.defaultRadio()
          this.dialogVisible = false
        },
        // 多选操作
        // 当选中发生变化时，将用户编号放入algIdSelected
        handleSelectionChange(val) {
          this.multipleSelection = val
          this.algIdSelected = [];
          let id = null;
          for (let i = 0; i < this.multipleSelection.length; i++) {
            id = this.multipleSelection[i].id
            this.algIdSelected[i] = id
          }
          // console.log(this.algIdSelected);
        },

        // 批量删除算法
        deleteAlgBatch() {
          this.$confirm('此操作将删除算法, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            let array = [];
            for (let i = 0; i < this.algIdSelected.length; i++) {
              let Id = {};
              Id.id = this.algIdSelected[i]
              array[i] = Id
            }
            array = {array};
            algorithm.deleteAlgBatch(array).then(response => {
              this.getData();
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              return response;
            }).catch((response) => {
              console.log("error: " + response.message)
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        },
        // 分页导航
        handlePageChange(val) {
          console.log("val=="+val);
          this.query.pageIndex=val;
          this.getData(this.query.log,this.query.pageIndex,this.query.pageSize);
        },
        addAlgorithm() {
          this.$router.push("/admin/addAlgorithm")
        }
      }
};
</script>

<style scoped>
.table-box {
}

.container {
  /*边界 20px*/
  margin: 20px;
}
#add-alg-btn {
  margin-right: 20px;
}

</style>
